﻿@{
    ViewBag.Title = "Grid : Show/Hide Columns";
}

<h2>Grid : Show/Hide Columns</h2>

<h3>Sample</h3>

<button onclick="button_click(0, this);">Hide Name Column</button>
<span style="width:10px;">&nbsp;</span>
<button onclick="button_click(1, this);">Hide Category Column</button>
<span style="width:10px;">&nbsp;</span>
<button onclick="button_click(2, this);">Hide SubCategory Column</button>
<span style="width:10px;">&nbsp;</span>
<button onclick="button_click(3, this);">Hide Controls/Features Column</button>
<br /><br />

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.Product>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Category);
            columns.Bound(c => c.SubCategory).Width(400);
            columns.Bound(c => c.Controls).Title("Controls/Features").ClientTemplate("<#= Controls==0?'':Controls #>");
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectProducts", "Grid"))
        .Render();
}

<h3>Documentation</h3>
<p>
The columns are shown or hidden by calling the showColumn() or hideColumn() functions defined 
in the ~/Scripts/telerik.extensions.js file.  Both showColumn() and hideColumn() take a parameter
of type integer indicating the index of the column to hide or show.

Here are examples to show and hide the URL column (index 2):

<pre class="code">
$('#MyGrid').data('tGrid').showColumn(2);
$('#MyGrid').data('tGrid').hideColumn(2);
</pre>
</p>

<script type="text/javascript">
    button_click = function(idx, button) {
        var showColumn = $(button).text().indexOf('Show') != -1;

        if (showColumn) {
            $(button).text($(button).text().replace('Show', 'Hide'));
            $('#MyGrid').data('tGrid').showColumn(idx);
        }
        else {
            $(button).text($(button).text().replace('Hide', 'Show'));
            $('#MyGrid').data('tGrid').hideColumn(idx);
        }
    }
</script>
